<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="./CSS/system_config.css" />
<link type="text/css" href="CSS/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.slider.min.js"></script>
<script type="text/javascript">
$(function() {  
	// setup slider
	$( ".slider" ).each(function() {
		// read initial values from markup and remove that
		var value = parseInt( $( this ).text(), 10 );		
		$( this ).empty().slider({
			value:value,
			range: "min",
			min:0,
			max:100,
			animate: true,
			orientation: "horizontal",
			slide: function( event, ui ) {
			 
			   $( "#"+$(this).attr("name")).val(ui.value );
		}
		});
	});
	$(".slider .ui-slider-handle").each(function(){
		 	
		 	   $(this).css("height","0.9em");
		 	  
		 	   //alert($(this).css("height"));
		 	});
	$( "#first  input[type=text]" ).each(function() {
			
			
		   var audiotxtid = $(this).attr("id");
		  
		   var value = $("#s"+audiotxtid).slider( "value");
			$(this).val(value);
		});
		
	$(".displayscreensetting").click(function(){

            
           var name =   $(this).attr("name");
		   var op= name.substring(name.length-1);

		   var audiotxt= name.substring(1,name.length-1);
		  // alert(audiotxt);
		   var sid= name.substring(0,name.length-1);
		   var smin= $("#"+sid).slider( "option","min");
		   
		   var value = $("#"+sid).slider( "value");
		 //  var v2 = $("#"+sid).slider( "option", "value")
		 // alert(value+"   "+v2);
		  // var value=$( "#"+audiotxt).val();
		   
		 ////  var jovalue = selectjson(jo,$("input[type=radio]:checked").attr("value"));
		   if(op =="+"){
             $("#"+sid).slider( "value",value+1);
		
			
             }
		 //  alert(value);
		   
		   if(op=="-"){
            //$("#"+sid).slider( "value",v2-1);
			$("#"+sid).slider( "option", "value", (value-1)<smin?smin:(value-1) );
		//	alert(v2-1);
		
			
              }
		    $( "#"+audiotxt).val($("#"+sid).slider( "option", "value"));
			//// setjson(jovalue,$("#"+sid).attr("name"),$("#"+sid).slider( "value"));
			// //data =JSON.stringify(jo);
			
           

     });
    $(".displayscreensetting").mouseup(function(){
	                   pressed=false;
					//   alert(pressed);
					
		
					if(typeof (intervalProcess)!="undefined" ){
	                  clearInterval(intervalProcess);
					  }
              	    if(typeof (timeoutProcess)!="undefined" ){
                       clearTimeout(timeoutProcess);
					   }

     });
	$(".displayscreensetting").mousedown(function(){

       
		      pressed = true;
		
				 
		var $name= $(this).attr("name");
			 
		
			
			 timeoutProcess=setTimeout(function(){
	
	                	if(pressed==true) {
						//alert(pressed);
                        intervalProcess=setInterval(function(){
                            var name =  $name;
		   var op= name.substring(name.length-1);

		   var audiotxt= name.substring(1,name.length-1);
		  // alert(audiotxt);
		   var sid= name.substring(0,name.length-1);
		   var smin= $("#"+sid).slider( "option","min");
		      var smax= $("#"+sid).slider( "option","max");
		   
		   var value = $("#"+sid).slider( "value");
		
		   if(op =="+"){
            // $("#"+sid).slider( "value",value+1);
		 $("#"+sid).slider( "option", "value", (value+1)>smax?smax:(value+1) );
			
             }
	
		   
		   if(op=="-"){
            //$("#"+sid).slider( "value",v2-1);
			$("#"+sid).slider( "option", "value", (value-1)<smin?smin:(value-1) );
	
		
			
              }
		    $( "#"+audiotxt).val($("#"+sid).slider( "option", "value"));
		
                        },150);
						}
                    },250);
					
           

     });
	
	$("#six input[type=text]").focus(function(){
		
		   	var _this=$(this);
		   	
	 $("#six input[type=button]").not("input[name=clear]").unbind("click"); 
	  
	 
	  $("#six input[type=button]").not("input[name=clear]").click(function(){
	          value= $(this).val();
			   //alert("value:"+value);
	         // $("input[name=ip]").val($("input[name=ip]").val()+value);
	        _this.val(_this.val()+value);
	      //   alert (te.attr("name"));
	
	});
		   
		   	$("#six input[name=clear]").unbind("click");
	  $("#six input[name=clear]").click(function(){
	         _this.val("");
	
	});
	
	 
  
   });

		$("#second input[type=button]").click(function(){

            var  val = $(this).val();
			alert("红外学习： "+val);
           

          });
		  
		  
		  
		$("#third input[type=button]").click(function(){

              var  val = $(this).val();
			//alert("232更改： "+val);
			
            var $keys = $("#keys");
		if(val=="开启")	{
          $keys.show();
          var lt = $(this).offset().left+80;
          var tp =$(this).offset().top+120;
		  $keys.css("left",lt+"px");
		  $keys.css("top",tp+"px");
		  
		  
        
          $("#keys a").not("#close").unbind("click");
          $("#keys a").not("#close").css("width","25px");
		  $("#keys a").not("#close").css("hight","40px");
		  $("#keys a").not("#close").css("float","left");
		  $("#keys a").not("#close").css("text-decoration","none");
          
		   $("#keys a").not("#close").click(function (){
        
 
            alert($(this).text());
        
             }
            )
		  
            } else{
			
			$keys.hide();
			}
  

          });  
		  
		  
		  $("#four input[type=button]").click(function(){

            
             var  val = $(this).val();
			alert("232设置： "+val);

          }); 
   
   
            $("#five input[type=button]").click(function(){

            
             var  val = $(this).val();
			  alert("控制接口选择： "+val);

          }); 
		  
		  
		    $("#save input[type=button]").click(function(){

            
             var  val = $(this).val();
			  alert(" "+val);

          }); 
		
		
		
		
		
});



</script>	
</head>

<body>
<p id="text_area0">系统设置</p>
<div id="system_config"> 
<table id="first" cellpadding="5px">
    <caption>显示屏设置</caption>
    <tr>
        <td>亮度</td>
        <td><input type="text" id="bri" onfocus="this.blur()" /></td>
        <td><input type="button" class="displayscreensetting" name="sbri-"  value="-" /></td>
        <td> <div class="slider" id="sbri" name="bri">10</div></td>    
        <td><input type="button" class="displayscreensetting" name="sbri+" value="+" /></td>
    </tr>
    <tr>
        <td>色度</td>
        <td><input type="text" id="chr" onfocus="this.blur()" /></td>
        <td><input type="button" class="displayscreensetting" name="schr-"  value="-" /></td>
        <td> <div class="slider" id="schr" name="chr">20</div></td>    
        <td><input type="button" class="displayscreensetting" name="schr+" value="+" /></td>
    </tr>
	<tr>
        <td>饱和度</td>
        <td><input type="text" id="sat" onfocus="this.blur()" /></td>
        <td><input type="button" class="displayscreensetting" name="ssat-"  value="-" /></td>
        <td> <div class="slider" id="ssat" name="sat">30</div></td>    
        <td><input type="button" class="displayscreensetting" name="ssat+" value="+" /></td>
    </tr>
</table>
<table id="second" cellpadding="3px">
    <caption>红外学习</caption>
    <tr>
        <td><input name="" type="button" value="开启" /></td>
    </tr>
    <tr>
        <td><input name="" type="button" value="关闭" /></td>
    </tr>
    <tr>
        <td><input name="" type="button" value="学习" /></td>
    </tr>
</table>
<table id="third" cellpadding="3px">
    <caption>232更改</caption>
    <tr>
        <td><input name="" type="button" value="开启" /></td>
    </tr>
    <tr>
        <td><input name="" type="button" value="关闭" /></td>
    </tr>
</table>
<table id="four" cellpadding="3px">
    <caption>232设置</caption>
    <tr>
        <td><input name="" type="button" value="1" /></td>
        <td><input name="" type="button" value="2" /></td>
        <td><input name="" type="button" value="3" /></td>
    </tr>
    <tr>
        <td><input name="" type="button" value="波特率" /></td>
        <td>&nbsp;</td>
        <td><input name="" type="button" value="数据位" /></td>
    </tr>
    <tr>
        <td><input name="" type="button" value="停止位" /></td>
        <td>&nbsp;</td>
        <td><input name="" type="button" value="校验位" /></td>
    </tr>
</table>
<table id="five" cellpadding="5px">
    <tr>
        <td></td>
        <td>硬盘录像机</td>
    </tr>
    <tr>
        <td>控<br />制<br />接<br />口<br />选<br />择</td>
        <td><input name="" type="button" value="RS-232" /><br />
        <input name="" type="button" value="IR" /><br />
        <input name="" type="button" value="两者" />
        </td>
    </tr>
</table>
<div id="six">
<table>
    <caption>网络环境</caption>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr>
        <td><input name="one"  type="button" value="1" /></td>
        <td><input name="two"  type="button" value="2" /></td>
        <td><input name="three" type="button" value="3" /></td>
    </tr>
    <tr>
        <td><input name="four" type="button" value="4" /></td>
        <td><input name="five" type="button" value="5" /></td>
        <td><input name="six" type="button" value="6" /></td>
    </tr>
    <tr>
        <td><input name="seven" type="button" value="7" /></td>
        <td><input name="eight" type="button" value="8" /></td>
        <td><input name="nine" type="button" value="9" /></td>
    </tr>
    <tr>
        <td><input name="zero" type="button" value="0" /></td>
        <td><input name="dot" type="button" value="." /></td>
        <td><input name="clear" type="button" value="清除" /></td>
    </tr>
</table>
<table cellpadding="5px;" style="margin-left:100px;">
    <tr>
        <td>IP地址</td>
    </tr>
    <tr>
        <td><input name="ip" type="text" /></td>
    </tr>
    <tr>
        <td>子网掩码</td>
    </tr>
    <tr>
        <td><input name="mask" type="text" /></td>
    </tr>
    <tr>
        <td>网关</td>
    </tr>
    <tr>
        <td><input name="gateway" type="text" /></td>
    </tr>
</table>
</div>
<div id="save"><input type="button" value="保存设置" /> </div>
</div>

<div id="keys" style="position:absolute; width:250px;height:120px; background:#ff0;display:none; padding-left:10px;left:0;top:0;">
  <div id="title" style="height:24px; padding-top:4px;">
  <span style="color:#0f0; font-size:12px; float:left;">*点击按键即可输入*</span> 
    <!--<a href="javascript:" id="close" onclick="$('#keys').hide();" style="float:right; text-decoration:none; margin-right:14px;">取消</a>
     -->
  </div>
    <a href="javascript:">1</a><a href="javascript:">2</a><a href="javascript:">3</a><a href="javascript:">4</a><a href="javascript:">5</a><a href="javascript:">6</a><a href="javascript:">7</a><a href="javascript:">8</a><a href="javascript:">9</a><a href="javascript:">0</a><br/>
    <a href="javascript:">Q</a><a href="javascript:">W</a><a href="javascript:">E</a><a href="javascript:">R</a><a href="javascript:">T</a><a href="javascript:">Y</a><a href="javascript:">U</a><a href="javascript:">I</a><a href="javascript:">O</a><a href="javascript:">P</a><br/>
    <a href="javascript:">A</a><a href="javascript:">S</a><a href="javascript:">D</a><a href="javascript:">F</a><a href="javascript:">G</a><a href="javascript:">H</a><a href="javascript:">J</a><a href="javascript:">K</a><a href="javascript:">L</a><br/>
    <a href="javascript:">Z</a><a href="javascript:">X</a><a href="javascript:">C</a><a href="javascript:">V</a><a href="javascript:">B</a><a href="javascript:">N</a><a href="javascript:">M</a>
  <!--  <input type="button"  style="float:left;text-align:right;  margin-left:100px;" value="确定" onclick="$('#keys').hide();"/>
   -->
  </div>
</body>
</html>
